<template>
  <div>
    <h3>SubItem组件</h3>
    <p>已知库存数: {{ num }}</p>
    <p>{{ age }}</p>
    <button @click="subFn">库存-1</button>
    <button @click="asyncSubNumFn">延迟2秒，库存-5</button>
  </div>
</template>

<script>
// 目标：映射使用 state
// 1、 从 vuex 中 按需导入 相应的 辅助函数 mapState
// 2. 把vuex - state 数据源 映射到当前组件的 computed 中

// 目标：映射 使用 mutations
// 1. 从 vuex 中 按需导入 相应的 辅助函数 mapMutations
// 2. 把vuex - mutations函数 映射到当前组件的 methods 中

import { mapState, mapMutations, mapActions } from 'vuex'
/*
console.log(mapState(['num']))
  {
    num(){
      return 100
    }
  }
*/
export default {
  name: 'SubItem',
  computed: {
    // 把mapState返回的对象解开（
    // 把返回的对象的键值对取出来卸载到computed中）
    ...mapState(['num', 'age'])
  },
  methods: {
    ...mapMutations(['subNum']),
    ...mapActions(['asyncSubNum']),
    subFn () {
      this.subNum()
    },
    asyncSubNumFn () {
      this.asyncSubNum(5)
    }
  }
}
</script>
